<template>
    <div class="side-bar-box">
        <template v-if="item.children && item.children.length > 0">
            <el-submenu :index="item._key" popper-class="side-bar__popper">
                <span class="custom-title" slot="title">
<!--                    <div class="menu-barline"></div>-->
                    <span class="ct-icon-box">
                        <!-- <div class="ct-icon-box__img">
                            <img src="~@/assets/icon_home.png" alt="图标">
                        </div> -->
                        <icon-svg :name="item.meta.icon || 'home'"></icon-svg>
                    </span>
                    <span class="ct-label">
                        <div class="justify-box">
                            {{ item.meta.title }}
                        </div>
                    </span>
                </span>
                <side-bar
                    v-for="(curItem) in item.children"
                    :key="curItem._key"
                    :item="curItem"
                    :is-collapse="isCollapse"
                ></side-bar>
            </el-submenu>
        </template>
        <template v-else>
            <router-link :to="item._key">
                <el-menu-item :index="item._key">
                    <span class="custom-title">
                        <div class="menu-barline"></div>
                        <span class="ct-icon-box">
                            <icon-svg v-if="item.meta.icon" :name="item.meta.icon"></icon-svg>
                            <!-- <icon-svg :name="item.meta.icon || ''"></icon-svg> -->
                        </span>
                        <span class="ct-label">
                            <div class="justify-box">
                                {{ item.meta.title }}
                            </div>
                        </span>
                    </span>
                </el-menu-item>
            </router-link>
        </template>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
    name: "SideBar"
})
export default class SideBar extends Vue {
    @Prop({
        type: Object,
        default: {}
    }) readonly item!: any;

    @Prop({
        type: Boolean,
        default: false
    }) readonly isCollapse!: boolean;
}
</script>
